
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            width: 100%;
            height: 150px;
            background-color: red;
            display: flex;
            justify-content: space-between;
            align-items: stretch;
        }
        .d2 {
            width: 100%;
            height: 500px;
            background-color: red;
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
        }
        div span {
            width: 100px;
            background-color: green;
        }
        </style>
       
    </style>
</head>
<body>
    <div class="d1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <p></p>
    <div class="d2">
        <span>1</span><br>
        <span>2</span><br>
        <span>3</span><br>
        <span>4</span><br>
        <span>5</span><br>
    </div>
    <style>
 
</body>
</html>
###
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式

###
justify-content
设置主轴上的子元素排列方式
flex-start  默认值。项目位于容器的开头。                前
flex-end    项目位于容器的结尾。                        后
center      项目位于容器中央。                          中
space-between   项目在行与行之间留有间隔。              间隔
space-around    项目在行之前、行之间和行之后留有空间。

###
align-items
设置侧轴上的元素排列方式
stretch     默认值。行拉伸以占据剩余空间。
center      朝着弹性容器的中央对行打包。
flex-start  朝着弹性容器的开头对行打包。
flex-end    朝着弹性容器的结尾对行打包。
space-between   行均匀分布在弹性容器中。
space-around    行均匀分布在弹性容器中，两端各占一半。



